<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport"
			content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/mui.picker.css" rel="stylesheet" />
		<link href="css/mui.poppicker.css" rel="stylesheet" />
		<link href="css/mui.dtpicker.css" rel="stylesheet" />
		<style>
		</style>
	</head>
	<body>
		<header class="mui-bar mui-bar-nav">
			<h1 class="mui-title">记账本</h1>
		</header>
		<div class="mui-content">
			<div class="mui-segmented-control">
				<a class="mui-control-item mui-active" href="item1">收支</a>
				<a class="mui-control-item" href="item2">统计</a>
			</div>
			<div id="item1" class="mui-slider-item mui-control-content mui-active">
				<div class="mui-card">
					<form class="mui-input-group">
						<div class="mui-input-row">
							<label>金额</label>
							<input type="text" class="mui-input-clear" placeholder="在此输入金额" id="amount">
						</div>
						<div class="mui-input-row">
							<label>收支</label>
							<input type="text" class="mui-input-clear" style="color: #0062CC;" id="io">
						</div>
						<div class="mui-input-row">
							<label>类型</label>
							<input type="text" class="mui-input-clear" id="type">
						</div>
						<div class="mui-input-row">
							<label>账户</label>
							<input type="text" class="mui-input-clear" id="account">
						</div>
						<div class="mui-input-row">
							<label>时间</label>
							<input type="text" class="mui-input-clear" id="time">
						</div>
						<div class="mui-input-row">
							<label>备注</label>
							<input type="text" class="mui-input-clear" maxlength="15" placeholder="在此输入备注" id="remark">
						</div>
						<button type="button" class="mui-btn mui-btn-blue" style="width: 100%;height: 40px;"
							id="save">保存</button>
					</form>
				</div>
				<ul class="mui-table-view" id="dataList1">
				</ul>
			</div>
			<div id="item2" class="mui-slider-item mui-control-content" align="center">
				
				<div class="mui-card">
					<div class="mui-card-header" id="today">
						
					</div>
					<div id="main" style="width: 368px;height:288px;"></div>
				</div>
				<div class="mui-card">
					<div class="mui-card-header">
						月度统计
						<span id="month">2021-03↕</span>
					</div>
					<div class="mui-card-content">
						<div id="main2" style="width: 388px;height:288px;"></div>
						<div id="main3" style="width: 388px;height:288px;"></div>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="js/mui.min.js"></script>
	<script src="js/mui.picker.js"></script>
	<script src="js/mui.poppicker.js"></script>
	<script src="js/mui.dtpicker.js"></script>
	<script src="js/date.js"></script>
	<script src="js/echarts.min.js"></script>
	<script type="text/javascript" charset="utf-8">
		var executeResult = false;
		var selectResult = null;
		var page = 1;
		var pageSize = 8;
		var picker = new mui.PopPicker();
		var picker2 = new mui.PopPicker();
		var picker3 = new mui.PopPicker();
		var picker4 = new mui.PopPicker();
		var dtPicker = new mui.DtPicker({
			'type': 'datetime'
		});
		var dtPicker2 = new mui.DtPicker({
			'type': 'month'
		});
		mui.init({
			gestureConfig: {
				longtap: true, //默认为false
			},
			pullRefresh: {
				container: '#item1', //待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
				up: {
					height: 50, //可选.默认50.触发上拉加载拖动距离
					auto: false, //可选,默认false.自动上拉加载一次
					contentrefresh: "正在加载...", //可选，正在加载状态时，上拉加载控件上显示的标题内容
					contentnomore: '没有更多数据了', //可选，请求完毕若没有更多数据时显示的提醒内容；
					callback: getList1 //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
			}
		});
		mui.plusReady(function() {
			picker.setData([{
					value: '餐饮',
					text: '餐饮'
				},
				{
					value: '零食',
					text: '零食'
				},
				{
					value: '衣服',
					text: '衣服'
				},
				{
					value: '娱乐',
					text: '娱乐'
				},
				{
					value: '汽车',
					text: '汽车'
				},
				{
					value: '家用',
					text: '家用'
				},
				{
					value: '公司',
					text: '公司'
				},
				{
					value: '其他',
					text: '其他'
				},
			]);
			picker.pickers[0].setSelectedValue('餐饮', 2000);
			document.getElementById("type").value = "餐饮";
			picker2.setData([{
					value: '默认账户',
					text: '默认账户'
				},
				{
					value: '备用账户',
					text: '备用账户'
				}
			]);
			picker2.pickers[0].setSelectedValue('默认账户', 2000);
			document.getElementById("account").value = "默认账户";
			picker3.setData([{
					value: '支出',
					text: '支出'
				},
				{
					value: '收入',
					text: '收入'
				}
			]);
			picker3.pickers[0].setSelectedValue('支出', 2000);
			document.getElementById("io").value = "支出";

			picker4.setData([{
					value: '工资',
					text: '工资'
				},
				{
					value: '其他',
					text: '其他'
				}
			]);
			picker4.pickers[0].setSelectedValue('工资', 2000);
			document.getElementById("time").value = new Date().Format("yyyy-MM-dd hh:mm");
			document.getElementById("month").value = new Date().Format("yyyy-MM-dd") + '↕';
			openDB();
			// executeSQL('drop table data'); 
			executeSQL(
				'create table if not exists data("id" CHAR(100) PRIMARY KEY,"amount" INT(10),"io" CHAR(100),"type" CHAR(100),"account" CHAR(100),"time" CHAR(100),"remark" CHAR(200))'
			);
			getList2();

			init();
		});

		document.getElementById("io").addEventListener("tap", function() {
			picker3.show(function(selectItems) {
				var text = selectItems[0].text;
				if (text == '支出') {
					document.getElementById("io").style.color = "#0062CC";
					picker.pickers[0].setSelectedValue('餐饮', 2000);
					document.getElementById("type").value = "餐饮";
				} else {
					document.getElementById("io").style.color = "#DD524D";
					picker4.pickers[0].setSelectedValue('工资', 2000);
					document.getElementById("type").value = "工资";
				}
				document.getElementById("io").value = text;
			});
		});
		document.getElementById("type").addEventListener("tap", function() {
			var io = document.getElementById("io").value;
			if (io == '支出') {
				picker.show(function(selectItems) {
					document.getElementById("type").value = selectItems[0].text;
				});
			} else {
				picker4.show(function(selectItems) {
					document.getElementById("type").value = selectItems[0].text;
				});
			}
		});
		document.getElementById("account").addEventListener("tap", function() {
			picker2.show(function(selectItems) {
				document.getElementById("account").value = selectItems[0].text;
			});
		});
		document.getElementById("time").addEventListener("tap", function() {
			dtPicker.show(function(selectItems) {
				document.getElementById("time").value = selectItems.text;
			});
		});
		document.getElementById("month").addEventListener("tap", function() {
			dtPicker2.show(function(selectItems) {
				document.getElementById("month").innerHTML = selectItems.text + "↕";
				chart2Init(selectItems.text);
			});
		});
		document.getElementById("month").addEventListener("tap", function() {
			dtPicker2.show(function(selectItems) {
				document.getElementById("month").innerHTML = selectItems.text + "↕";
				chart2Init(selectItems.text);
			});
		});
		document.getElementById("save").addEventListener("tap", function() {
			var data = {
				"id": new Date().getTime() + Math.floor(Math.random() * (999 - 100 + 1) + 100),
				"amount": document.getElementById("amount").value,
				"io": document.getElementById("io").value,
				"type": document.getElementById("type").value,
				"account": document.getElementById("account").value,
				"time": document.getElementById("time").value,
				"remark": document.getElementById("remark").value
			};
			if (isNaN(data.amount) || data.amount <= 0) {
				mui.alert('请输入正确的金额', '提示', '知道了', function(e) {
					e.index
				}, 'div');
				return;
			}
			document.getElementById("amount").value = "";
			document.getElementById("remark").value = "";
			executeSQL('insert into data values("' + data.id + '","' + data.amount + '","' + data.io + '","' + data
				.type + '","' + data
				.account + '","' + data.time + '","' + data.remark + '")');
			setTimeout(function() {
				if (executeResult) {
					mui.toast("保存成功");
					getList2();
				} else {
					mui.toast("保存失败，请联系管理员");
				}
			}, 300);
		});

		mui("#dataList1").on('longtap', '.mui-table-view-cell', function() {
			//获取id
			var id = this.getAttribute("id");
			var elem = this;
			//传值给详情页面，通知加载新数据
			mui.confirm('删除这条记录？', '提示', ['删除', '取消'], function(e) {
				if (e.index == 0) {
					executeSQL('delete from data where id="' + id + '"');
					setTimeout(function() {
						if (executeResult) {
							getList2();
							mui.toast("删除成功");
						}
					}, 100);
				}
			}, 'div');
		});
		mui(".mui-segmented-control").on('tap', '.mui-control-item', function() {
			//获取id
			var href = this.getAttribute("href");
			var elem = this;
			document.getElementsByClassName("mui-control-item mui-active")[0].className = "mui-control-item";
			elem.className = "mui-control-item mui-active";
			document.getElementsByClassName("mui-slider-item mui-control-content mui-active")[0].className =
				"mui-slider-item mui-control-content";
			document.getElementById(href).className = "mui-slider-item mui-control-content mui-active";
			if (href == "item2") {
				init();
			}
		});

		function getList1() {
			var start = (page - 1) * pageSize;
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select * from data order by time desc limit ' + pageSize + ' offset ' + start,
				success: function(data) {
					var selectResult = data;
					if (selectResult != null) {
						var table = document.body.querySelector('#dataList1');
						if (selectResult.length > 0) {
							// table.innerHTML = '<li class="mui-table-view-divider mui-row" style="font-size:14px;" align="center">'+
							// 					'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#DD524D;">收入 '+inputTotal+'</span>'+
							// 					'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#0062CC;">支出 '+outputTotal+'</span>'+
							// 					'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#2AC845;">结余 '+(inputTotal - outputTotal)+'</span><br>'+
							// 					'</li>';

							for (j = 0, len = selectResult.length; j < len; j++) {
								var color = "#0062CC";
								var str = "-";
								if (selectResult[j].io == '收入') {
									color = "#DD524D";
									str = "+";
								}
								var html = '<span class="mui-media-object mui-pull-left"></span>' +
									'<div class="mui-media-body" style="font-size:16px;">' +
									'<span style="color:' + color + ';">' + str + selectResult[j].amount +
									'</span>' +
									'<span> ' + selectResult[j].remark + '</span>' +
									'<span style="float:right;" class="mui-badge"> ' + selectResult[j].type +
									'</span>' +
									'<p class=""mui-ellipsis">' + selectResult[j].time +
									'<span style="float:right;"> ' + selectResult[j].account + '</span>' +
									'</p></div>';
								var div = document.createElement('li');
								div.className = "mui-table-view-cell mui-media";
								div.id = selectResult[j].id;
								div.innerHTML = html;
								table.appendChild(div);
							}
							page++;
							mui('#item1').pullRefresh().endPullupToRefresh(false);
							mui('#item1').pullRefresh().refresh(true);
							mui('#item1').pullRefresh().enablePullupToRefresh();
							if (selectResult.length < pageSize) {
								mui('#item1').pullRefresh().disablePullupToRefresh();
							}
						} else {
							mui('#item1').pullRefresh().disablePullupToRefresh();
							mui('#item1').pullRefresh().endPullupToRefresh(true);
						}
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
				}
			});
		}

		function getList2() {
			var inputTotal = 0;
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select sum(amount) as s from data where io = "收入"',
				success: function(data) {
					inputTotal = data[0].s;
					if (inputTotal == null) {
						inputTotal = 0;
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
					inputTotal = 0;
				}
			});
			var outputTotal = 0;
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select sum(amount) as s from data where io = "支出"',
				success: function(data) {
					outputTotal = data[0].s;
					if (outputTotal == null) {
						outputTotal = 0;
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
					outputTotal = 0;
				}
			});
			page = 1;
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select * from data order by time desc limit ' + pageSize,
				success: function(data) {
					var selectResult = data;
					if (selectResult != null) {
						var table = document.body.querySelector('#dataList1');
						table.innerHTML =
							'<li class="mui-table-view-divider mui-row" style="font-size:14px;" align="center">' +
							'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#DD524D;">收入 ' + inputTotal +
							'</span>' +
							'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#0062CC;">支出 ' + outputTotal +
							'</span>' +
							'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#2AC845;">结余 ' + (inputTotal -
								outputTotal) + '</span><br>' +
							'</li>';
						if (selectResult.length > 0) {
							for (j = 0, len = selectResult.length; j < len; j++) {
								var color = "#0062CC";
								var str = "-";
								if (selectResult[j].io == '收入') {
									color = "#DD524D";
									str = "+";
								}
								var html = '<span class="mui-media-object mui-pull-left"></span>' +
									'<div class="mui-media-body" style="font-size:16px;">' +
									'<span style="color:' + color + ';">' + str + selectResult[j].amount +
									'</span>' +
									'<span> ' + selectResult[j].remark + '</span>' +
									'<span style="float:right;" class="mui-badge"> ' + selectResult[j].type +
									'</span>' +
									'<p class=""mui-ellipsis">' + selectResult[j].time +
									'<span style="float:right;"> ' + selectResult[j].account + '</span>' +
									'</p></div>';
								var div = document.createElement('li');
								div.className = "mui-table-view-cell mui-media";
								div.id = selectResult[j].id;
								div.innerHTML = html;
								table.appendChild(div);
							}
							page++;
							mui('#item1').pullRefresh().endPullupToRefresh(false);
							mui('#item1').pullRefresh().refresh(true);
							mui('#item1').pullRefresh().enablePullupToRefresh();
							if (selectResult.length < pageSize) {
								mui('#item1').pullRefresh().disablePullupToRefresh();
							}
						} else {
							mui('#item1').pullRefresh().disablePullupToRefresh();
							mui('#item1').pullRefresh().endPullupToRefresh(true);
						}
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
				}
			});
		}

		// 打开数据库
		function openDB() {
			plus.sqlite.openDatabase({
				name: 'first',
				path: '_doc/count.db',
				success: function() {
					console.log('openDatabase success');
				},
				fail: function(e) {
					console.log('openDatabase failed: ' + JSON.stringify(e));
				}
			});
		}

		// 执行SQL语句
		function executeSQL(sql) {
			plus.sqlite.executeSql({
				name: 'first',
				sql: sql,
				success: function() {
					executeResult = true;
				},
				fail: function(e) {
					console.log('executeSql failed: ' + JSON.stringify(e));
					executeResult = false;
				}
			});
		}

		// 查询SQL语句
		function selectSQL(sql) {
			plus.sqlite.selectSql({
				name: 'first',
				sql: sql,
				success: function(data) {
					console.log('selectSql success: ' + data.length);
					selectResult = data;
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
					selectResult = null;
				}
			});
		}

		function init() {
			var today = 0;
			var start = new Date().Format("yyyy-MM-dd") + " 00:00:00";
			var end = new Date().Format("yyyy-MM-dd") + " 23:59:59";
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select sum(amount) as s from data where io = "支出" and time > "'+start+'" and time < "'+end+'"',
				success: function(data) {
					today = data[0].s;
					if (today == null) {
						today = 0;
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
					today = 0;
				}
			});
			var curM = 0;
			var start2 = new Date().Format("yyyy-MM") + "-01 00:00:00";
			var end2 = new Date().Format("yyyy-MM") + "-31 23:59:59";
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select sum(amount) as s from data where io = "支出" and time > "'+start2+'" and time < "'+end2+'"',
				success: function(data) {
					curM = data[0].s;
					if (curM == null) {
						curM = 0;
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
					curM = 0;
				}
			});
			var curN = 0;
			var start3 = new Date().Format("yyyy") + "-01-01 00:00:00";
			var end3 = new Date().Format("yyyy") + "-12-31 23:59:59";
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select sum(amount) as s from data where io = "支出" and time > "'+start3+'" and time < "'+end3+'"',
				success: function(data) {
					curN = data[0].s;
					if (curN == null) {
						curN = 0;
					}
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
					curN = 0;
				}
			});
			
			chart1Init();
			chart2Init(new Date().Format("yyyy-MM"));
			setTimeout(function(){
				var ele = document.body.querySelector('#today');
				ele.innerHTML =
					'<div class="mui-row" style="width:100%;">' +
					'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#0062CC;">今日 ' + today +
					'</span>' +
					'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#0062CC;">本月 ' + curM +
					'</span>' +
					'<span class="mui-col-sm-4 mui-col-xs-4" style="color:#0062CC;">本年 ' + curN + 
					'</span>' +
					'</div>';
			},200)
		}

		function chart1Init() {
			var xArr = [];
			var cy = [];
			var ls = [];
			var yf = [];
			var yl = [];
			var qc = [];
			var jy = [];
			var gs = [];
			var qt = [];
			var lArr = [];
			var totalArr = [];
			var startTime = new Date((new Date().getTime() - (9 * 24 * 60 * 60 * 1000))).Format("yyyy-MM-dd");
			var endTime = new Date().Format("yyyy-MM-dd HH:mm:ss");
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select * from data where io = "支出" and time > "' + startTime + '" and time < "' + endTime +
					'" order by time asc',
				success: function(data) {
					for (var i = 0; i < data.length; i++) {
						var temp = data[i];
						var date = temp.time.substring(6, 10);
						if (xArr.indexOf(date) == -1) {
							xArr.push(date);
						}
						if (totalArr[xArr.indexOf(date)] == null) totalArr[xArr.indexOf(date)] = 0;
						totalArr[xArr.indexOf(date)] += temp.amount;
						if (temp.type == '餐饮') {
							if (cy[xArr.indexOf(date)] == null) cy[xArr.indexOf(date)] = 0;
							cy[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '零食') {
							if (ls[xArr.indexOf(date)] == null) ls[xArr.indexOf(date)] = 0;
							ls[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '衣服') {
							if (yf[xArr.indexOf(date)] == null) yf[xArr.indexOf(date)] = 0;
							yf[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '娱乐') {
							if (yl[xArr.indexOf(date)] == null) yl[xArr.indexOf(date)] = 0;
							yl[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '汽车') {
							if (qc[xArr.indexOf(date)] == null) qc[xArr.indexOf(date)] = 0;
							qc[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '家用') {
							if (jy[xArr.indexOf(date)] == null) jy[xArr.indexOf(date)] = 0;
							jy[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '公司') {
							if (gs[xArr.indexOf(date)] == null) gs[xArr.indexOf(date)] = 0;
							gs[xArr.indexOf(date)] += temp.amount;
						} else if (temp.type == '其他') {
							if (qt[xArr.indexOf(date)] == null) qt[xArr.indexOf(date)] = 0;
							qt[xArr.indexOf(date)] += temp.amount;
						}
					}
					if (cy.length > 0) {
						lArr.push("餐饮");
					}
					if (ls.length > 0) {
						lArr.push("零食");
					}
					if (yf.length > 0) {
						lArr.push("衣服");
					}
					if (yl.length > 0) {
						lArr.push("娱乐");
					}
					if (qc.length > 0) {
						lArr.push("汽车");
					}
					if (jy.length > 0) {
						lArr.push("家用");
					}
					if (gs.length > 0) {
						lArr.push("公司");
					}
					if (qt.length > 0) {
						lArr.push("其他");
					}

					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: "近期支出",
							left: 'center'
						},
						tooltip: {
							trigger: 'axis',
							axisPointer: { // Use axis to trigger tooltip
								type: 'shadow' // 'shadow' as default; can also be 'line' or 'shadow'
							}
						},
						legend: {
							data: lArr,
							top: '18',
						},
						grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							containLabel: true
						},
						yAxis: {
							type: 'value'
						},
						xAxis: {
							type: 'category',
							data: xArr
						},
						series: [{
								name: '餐饮',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: cy
							},
							{
								name: '零食',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: ls
							},
							{
								name: '衣服',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: yf
							},
							{
								name: '娱乐',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: yl
							},
							{
								name: '汽车',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: qc
							},
							{
								name: '家用',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: jy
							},
							{
								name: '公司',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: gs
							},
							{
								name: '其他',
								type: 'bar',
								stack: 'total',
								emphasis: {
									focus: 'series'
								},
								data: qt
							}
						]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
				}
			});

		}

		function chart2Init(month) {
			var arr = [];
			var cy = 0;
			var ls = 0;
			var yf = 0;
			var yl = 0;
			var qc = 0;
			var jy = 0;
			var gs = 0;
			var qt = 0;
			var total = 0;
			var xArr = [];
			var totalArr = [];
			var startTime = month + '-01 00:00:00';
			var endTime = month + '-31 00:00:00';
			plus.sqlite.selectSql({
				name: 'first',
				sql: 'select * from data where io = "支出" and time > "' + startTime + '" and time < "' + endTime +
					'" order by time asc',
				success: function(data) {
					for (var i = 0; i < data.length; i++) {
						var temp = data[i];
						total += temp.amount;
						var date = temp.time.substring(6, 10);
						if (xArr.indexOf(date) == -1) {
							xArr.push(date);
						}
						if (totalArr[xArr.indexOf(date)] == null) totalArr[xArr.indexOf(date)] = 0;
						totalArr[xArr.indexOf(date)] += temp.amount;
						if (temp.type == '餐饮') {
							cy += temp.amount;
						} else if (temp.type == '零食') {
							ls += temp.amount;
						} else if (temp.type == '衣服') {
							yf += temp.amount;
						} else if (temp.type == '娱乐') {
							yl += temp.amount;
						} else if (temp.type == '汽车') {
							qc += temp.amount;
						} else if (temp.type == '家用') {
							jy += temp.amount;
						} else if (temp.type == '公司') {
							gs += temp.amount;
						} else if (temp.type == '其他') {
							qt += temp.amount;
						}
					}
					if (cy > 0) {
						var cyData = {
							value: cy,
							name: '餐饮'
						};
						arr.push(cyData);
					}
					if (ls > 0) {
						var lsData = {
							value: ls,
							name: '零食'
						};
						arr.push(lsData);
					}
					if (yf > 0) {
						var yfData = {
							value: yf,
							name: '衣服'
						};
						arr.push(yfData);
					}
					if (yl > 0) {
						var ylData = {
							value: yl,
							name: '娱乐'
						};
						arr.push(ylData);
					}
					if (qc > 0) {
						var qcData = {
							value: qc,
							name: '汽车'
						};
						arr.push(qcData);
					}
					if (jy > 0) {
						var jyData = {
							value: jy,
							name: '家用'
						};
						arr.push(jyData);
					}
					if (gs > 0) {
						var gsData = {
							value: gs,
							name: '公司'
						};
						arr.push(gsData);
					}
					if (qt > 0) {
						var qtData = {
							value: qt,
							name: '其他'
						};
						arr.push(qtData);
					}


					// 基于准备好的dom，初始化echarts实例
					var myChart = echarts.init(document.getElementById('main2'));

					// 指定图表的配置项和数据
					var option = {
						title: {
							text: '类别占比',
							subtext: '共支出' + total + '元',
							left: 'center'
						},
						tooltip: {
							trigger: 'item'
						},
						series: [{
							name: '类别占比',
							type: 'pie',
							radius: '50%',
							data: arr,
							emphasis: {
								itemStyle: {
									shadowBlur: 10,
									shadowOffsetX: 0,
									shadowColor: 'rgba(0, 0, 0, 0.5)'
								}
							}
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart.setOption(option);


					// 基于准备好的dom，初始化echarts实例
					var myChart2 = echarts.init(document.getElementById('main3'));

					// 指定图表的配置项和数据
					var option2 = {
						title:{
							text:"每日支出",
							left:"center"
						},
						tooltip: {
							trigger: 'axis'
						},
						xAxis: {
							type: 'category',
							data: xArr
						},
						yAxis: {
							type: 'value'
						},
						series: [{
							name:"支出",
							data: totalArr,
							type: 'line',
							smooth: true,
							areaStyle: {}
						}]
					};

					// 使用刚指定的配置项和数据显示图表。
					myChart2.setOption(option2);
				},
				fail: function(e) {
					console.log('selectSql fail: ' + JSON.stringify(e));
				}
			});

		}
	</script>
</html>
